<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Godot CSV翻译工具</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Godot CSV翻译工具</h1>
            <p>支持28种语言的CSV文件翻译，基于百度翻译API</p>
        </header>

        <main>
            <!-- 会话信息显示 -->
            <section class="session-section">
                <div id="sessionDisplay" class="session-display" style="display: none;"></div>
            </section>

            <!-- API配置区域 -->
            <section class="config-section">
                <h2>百度翻译API配置</h2>
                <div class="config-form">
                    <div class="form-group">
                        <label for="appId">App ID:</label>
                        <input type="text" id="appId" placeholder="请输入百度翻译API的App ID">
                    </div>
                    <div class="form-group">
                        <label for="secretKey">Secret Key:</label>
                        <input type="password" id="secretKey" placeholder="请输入百度翻译API的Secret Key">
                    </div>
                    <div class="form-group">
                        <p class="api-link">没有API Key？前往 <a href="https://fanyi-api.baidu.com/api/trans/product/desktop?req=developer" target="_blank">百度翻译开放平台</a> 注册。</p>
                    </div>
                    <button id="configBtn" class="btn btn-primary">保存配置</button>
                    <div class="cache-controls">
                        <button id="cacheStatsBtn" class="btn btn-info btn-small">缓存统计</button>
                        <button id="clearCacheBtn" class="btn btn-warning btn-small">清理缓存</button>
                    </div>
                    <div id="configStatus" class="status-message"></div>
                    <p class="api-register-link">百度翻译API注册：<a href="https://api.fanyi.baidu.com/api/trans/product/index" target="_blank">点击注册</a></p>
                </div>
            </section>

            <!-- 文件上传区域 -->
            <section class="upload-section">
                <h2>上传CSV文件</h2>
                <div class="upload-area" id="uploadArea">
                    <div class="upload-content">
                        <svg class="upload-icon" viewBox="0 0 24 24">
                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
                        </svg>
                        <p>拖拽CSV文件到此处或点击选择文件</p>
                        <input type="file" id="csvFile" accept=".csv" hidden>
                        <button class="btn btn-secondary" onclick="document.getElementById('csvFile').click()">选择文件</button>
                    </div>
                </div>
                <div id="fileInfo" class="file-info" style="display: none;"></div>
            </section>

            <!-- 翻译配置区域 -->
            <section class="translation-section" id="translationSection" style="display: none;">
                <h2>翻译配置</h2>
                <div class="translation-form">
                    <div class="form-group">
                        <label for="sourceColumn">源语言列:</label>
                        <select id="sourceColumn">
                            <option value="">请选择源语言列</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>目标翻译语言:</label>
                        <div class="language-controls">
                            <button type="button" id="selectAllBtn" class="btn btn-secondary btn-small">全选</button>
                            <button type="button" id="deselectAllBtn" class="btn btn-secondary btn-small">取消全选</button>
                        </div>
                        <div class="language-grid" id="languageGrid">
                            <!-- 语言选项将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="forceRetranslate">
                            <span class="checkmark"></span>
                            强制重新翻译已有内容
                        </label>
                    </div>
                    
                    <div class="translation-controls">
                        <button id="translateBtn" class="btn btn-success">开始翻译</button>
                        <button id="stopTranslateBtn" class="btn btn-danger" style="display: none;">停止翻译</button>
                    </div>
                </div>
            </section>

            <!-- 进度显示区域 -->
            <section class="progress-section" id="progressSection" >
                <h2>翻译进度</h2>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div id="progressText" class="progress-text">准备开始翻译...</div>
                
                <!-- 实时翻译日志 -->
                <div class="translation-log-container">
                    <div class="log-header">
                        <h3>翻译日志</h3>
                        <button id="clearLogBtn" class="btn btn-secondary btn-small">清空日志</button>
                    </div>
                    <div id="translationLog" class="translation-log"></div>
                </div>
            </section>

            <!-- 结果显示区域 -->
            <section class="result-section" id="resultSection" >
                <h2>翻译完成</h2>
                <div class="result-info" id="resultInfo"></div>
                <button id="downloadBtn" class="btn btn-success">下载翻译文件</button>
            </section>
        </main>

        <footer>
            <p>&copy; 2025 Godot CSV翻译工具 - 基于百度翻译API</p>
            <p>GitHub: <a href="https://github.com/dependon/Spark-godot-translation" target="_blank">Spark-godot-translation</a></p>
            <p>作者 Bilibili: <a href="https://space.bilibili.com/144159485" target="_blank">depend</a></p>
        </footer>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="script.js"></script>
</body>
</html>